<template>
	<view>
		<form @submit="savepubinfo" report-submit>
			<view class="container">
				<view class="main">
					<view class="header">创建简历(3/4)</view>
					<view class="title">
						<text @tap="addedu">+添加工作经历</text>
					</view>

					<view class="list">
						<view class="item">
							<view class="name">
								入职时间
								<text>*</text>
							</view>
							<view class="selectitem">
								<picker mode="date" :value="begindatejob" @change="BeginDateJob">
									<view class="picker">
										{{ begindatejob ? begindatejob : '请选择' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">
								离职时间
								<text>*</text>
							</view>
							<view class="selectitem">
								<picker mode="date" :value="enddatejob" @change="EndDateJob">
									<view class="picker">
										{{ enddatejob ? enddatejob : '请选择' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">
								公 司
								<text>*</text>
							</view>
							<view class="selectitem"><input :value="expressinfo.companyname" type="text"
									name="companyname" placeholder="请输入公司" cursor-spacing="140" /></view>
						</view>

						<view class="item">
							<view class="name">
								职 位
								<text>*</text>
							</view>
							<view class="selectitem"><input type="text" :value="expressinfo.jobtitle" name="jobtitle"
									placeholder="请输入职位" cursor-spacing="140" /></view>
						</view>
						
						<view class="item">
							<view class="name">
								职 位 描 述
							</view>
							<view class="selectitem mar-top20" style="height: 160rpx;">
								<textarea class="wh100" :value="expressinfo.jobbrief" name="jobbrief" placeholder="请输入职位描述" />
							</view>
						</view>
					</view>

					<view class="title"></view>
					<view class="list poRel" v-if="ln > 0">
						<view class="poAbs" @click.stop="ln = 0" style="right: 30rpx;top: 20rpx;">删除</view>
						<view class="item">
							<view class="name">
								入职时间
								<text>*</text>
							</view>
							<view class="selectitem">
								<picker mode="date" :value="begindatejob2" @change="BeginDateJob2">
									<view class="picker">
										{{ begindatejob2 ? begindatejob2 : '请选择' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">
								离职时间
								<text>*</text>
							</view>
							<view class="selectitem">
								<picker mode="date" :value="enddatejob2" @change="EndDateJob2">
									<view class="picker">
										{{ enddatejob2 ? enddatejob2 : '请选择' }}
									</view>
								</picker>
							</view>
						</view>

						<view class="item">
							<view class="name">
								公 司
								<text>*</text>
							</view>
							<view class="selectitem">
								<input :value="expressinfo.companyname2" type="text" name="companyname2"
									placeholder="请输入公司" cursor-spacing="140" />
							</view>
						</view>

						<view class="item">
							<view class="name">
								职 位
								<text>*</text>
							</view>
							<view class="selectitem"><input type="text" name="jobtitle2" :value="expressinfo.jobtitle2"
									placeholder="请输入职位" cursor-spacing="140" /></view>
						</view>
						
						<view class="item">
							<view class="name">
								职 位 描 述
							</view>
							<view class="selectitem mar-top20" style="height: 160rpx;">
								<textarea class="wh100" :value="expressinfo.jobbrief2" name="jobbrief2" placeholder="请输入职位描述" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 50px;">

			</view>
			<view class="weixinmao-float">
				<view class="bottom">
					<button class="footer" formType="submit" @click="nexts()">无工作经历</button>
					<button class="footer" formType="submit">下一步</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		Note
	} from '../findworker/note-model.js';
	var note = new Note();
	export default {
		data() {
			return {
				ln: 0,
				education: ['初中', '高中', '中技', '中专', '大专', '本科', '硕士', '博士', '博后'],
				educationindex: -1,
				educationname: '',
				educationindex2: -1,
				educationname2: '',

				expressinfo: {
					companyname: '',
					jobtitle: '',
					jobbrief: '',
					companyname2: '',
					jobtitle2: '',
					jobbrief2: ''
				},

				begindatejob: '',
				enddatejob: '',
				begindatejob2: '',
				enddatejob2: ''
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: '我的工作经历'
			});
			var that = this;
			that.initpage();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			initpage: function() {
				var that = this;
				var params = {};
				note.getPubExpressInit((data) => {
					var expressinfo = data.expressinfo;
					if (expressinfo) {
						that.setData({
							expressinfo: expressinfo,
							ln: data.ln,
							begindatejob: expressinfo.begindatejob,
							enddatejob: expressinfo.enddatejob
						});
						if (data.ln > 0) {
							that.setData({
								begindatejob2: expressinfo.begindatejob2,
								enddatejob2: expressinfo.enddatejob2
							});
						}
					}
				}, params);
			},

			addedu: function() {
				if (this.ln == 1) {
					uni.showToast({
						title: '最多添加2条信息',
						icon: 'none'
					});
				} else {
					this.setData({
						ln: this.ln + 1
					});
				}
			},

			BeginDateJob: function(e) {
				var that = this;
				that.begindatejob = e.detail.value;
				this.setData({
					begindatejob: that.begindatejob
				});
			},

			EndDateJob: function(e) {
				var that = this;
				that.enddatejob = e.detail.value;
				this.setData({
					enddatejob: that.enddatejob
				});
			},

			BeginDateJob2: function(e) {
				var that = this;
				that.begindatejob2 = e.detail.value;
				this.setData({
					begindatejob2: that.begindatejob2
				});
			},

			EndDateJob2: function(e) {
				var that = this;
				that.enddatejob2 = e.detail.value;
				this.setData({
					enddatejob2: that.enddatejob2
				});
			},
			nexts() {
				uni.navigateTo({
					url: '/pages/nextdone/index'
				});
			},
			savepubinfo: function(e) {
				var that = this;
				var ln = that.ln;
				var title = that.title;
				var begindatejob = that.begindatejob;
				var enddatejob = that.enddatejob;
				var companyname = e.detail.value.companyname;
				var jobtitle = e.detail.value.jobtitle;
				var jobbrief = e.detail.value.jobbrief;
				var jobbrief2 = e.detail.value.jobbrief2;
				if (begindatejob == '') {
					uni.showModal({
						title: '提示',
						content: '请选择入职时间',
						showCancel: false
					});
					return;
				}
				if (enddatejob == '') {
					uni.showModal({
						title: '提示',
						content: '请选择离职时间',
						showCancel: false
					});
					return;
				}
				if (companyname == '') {
					uni.showModal({
						title: '提示',
						content: '请输入公司',
						showCancel: false
					});
					return;
				}
				if (jobtitle == '') {
					uni.showModal({
						title: '提示',
						content: '请选择职位',
						showCancel: false
					});
					return;
				}
				if (ln == 1) {
					var begindatejob2 = that.begindatejob2;
					var enddatejob2 = that.enddatejob;
					var companyname2 = e.detail.value.companyname2;
					var jobtitle2 = e.detail.value.jobtitle2;
					if (begindatejob2 == '') {
						uni.showModal({
							title: '提示',
							content: '请选择入职时间',
							showCancel: false
						});
						return;
					}
					if (enddatejob2 == '') {
						uni.showModal({
							title: '提示',
							content: '请选择离职时间',
							showCancel: false
						});
						return;
					}
					if (begindatejob2 == '') {
						uni.showModal({
							title: '提示',
							content: '请选择入职时间',
							showCancel: false
						});
						return;
					}
					if (enddatejob2 == '') {
						uni.showModal({
							title: '提示',
							content: '请选择离职时间',
							showCancel: false
						});
						return;
					}
					if (companyname2 == '') {
						uni.showModal({
							title: '提示',
							content: '请输入公司',
							showCancel: false
						});
						return;
					}
					if (jobtitle2 == '') {
						uni.showModal({
							title: '提示',
							content: '请选择职位',
							showCancel: false
						});
						return;
					}
				}
				if (ln == 0) {
					var params = {
						begindatejob: begindatejob,
						enddatejob: enddatejob,
						companyname: companyname,
						jobtitle: jobtitle,
						jobbrief: jobbrief,
						ln: that.ln
					};
				} else {
					var params = {
						begindatejob: begindatejob,
						enddatejob: enddatejob,
						companyname: companyname,
						jobtitle: jobtitle,
						jobbrief: jobbrief,
						begindatejob2: begindatejob2,
						enddatejob2: enddatejob2,
						companyname2: companyname2,
						jobtitle2: jobtitle2,
						jobbrief2: jobbrief2,
						ln: that.ln
					};
				}
				note.Saveexpress((data) => {
					uni.navigateTo({
						url: '/pages/nextdone/index'
					});
				}, params);
			}
		}
	};
</script>
<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100%;
		margin-bottom: 20%;
	}

	.container .main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.container .main .header {
		width: 730rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-size: 0.9rem;
		padding-left: 20rpx;
		color: #000;
		text-align: center;
		background: #fff;
	}

	.container .main .title {
		width: 730rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-size: 0.9rem;
		padding-left: 20rpx;
		color: #3274e5;
		text-align: right;
	}

	.container .main .list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
	}

	::-webkit-input-placeholder {
		color: #000;
		font-size: 18px;
	}

	.container .main .list .item {
		width: 700rpx;
		border-bottom: 1rpx solid #f5f5f5;
		align-self: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		/*
flex-direction: row;
justify-content:space-between;
*/
	}

	.container .main .list .item .name {
		font-size: 14px;
		color: #a2a2a2;
	}

	.container .main .list .item .name text {
		color: red;
	}

	.container .main .list .item .selectitem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #808080;
		font-size: 14px;
		height: 100rpx;
		line-height: 100rpx;
		background: #fff;
	}

	.container .main .list .item .selectitem input {
		height: 100rpx;
		width: 740rpx;
		color: #000;
		font-size: 18px;
	}

	.container .main .list .item .selectitem>image {
		width: 30rpx;
		height: 30rpx;
		align-self: center;
	}

	.container .main .checklist {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		background: #fff;
		flex-wrap: wrap;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.radio {
		font-size: 18px;
	}

	.picker {
		font-size: 18px;
	}

	.container .main .checklist checkbox-group {
		width: 720rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.container .main .checklist .checkitem {
		font-size: 0.7rem;
		width: 240rpx;
		margin-top: 10rpx;
	}

	.container .doagree {
		font-size: 0.7rem;
		margin-left: 50rpx;
		margin-top: 40rpx;
		margin-bottom: 280rpx;
		padding-bottom: 50rpx;
	}

	.container .main .imglist {
		width: 720rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		background: #fff;
	}

	.container .main .imglist .imgitem {
		width: 200rpx;
		border: 1rpx dotted #f5f5f5;
		position: relative;
	}

	.container .main .imglist .imgitem image {
		width: 200rpx;
		height: 200rpx;
	}

	.sum {
		position: absolute;
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		background: #3274e5;
		top: -10rpx;
		left: 150rpx;
		color: #fff;
		z-index: 1000;
		font-size: 0.7rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.sum text {
		font-size: 0.7rem;
		align-self: center;
	}

	.weixinmao-msg {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 2001;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.weixinmao-content {
		width: 720rpx;
		height: 450rpx;
		z-index: 4001;
		background: #fff;
		align-self: center;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.map {
		height: 850rpx;
	}

	.mapbtn {
		background: #3274e5;
		color: #fff;
		font-size: 1rem;
		width: 400rpx;
	}

	.weixinmao-content .title {
		border-bottom: 1rpx solid #e5e5e5;
		width: 100%;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 0.8rem;
		background: #3274e5;
		color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.weixinmao-content .title view:nth-child(1) {
		width: 30%;
	}

	.weixinmao-content .title view:nth-child(2) {
		width: 40%;
	}

	.weixinmao-content .title view:nth-child(3) {
		width: 30%;
	}

	.weixinmao-content .list {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.weixinmao-content .list .item {
		width: 100%;
		align-self: center;
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.weixinmao-foot {
		display: flex;
		justify-content: center;
		flex-direction: row;

		z-index: 999;

		width: 100%;
	}

	.weixinmao-foot view {
		color: #fff;
		align-self: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 0.9rem;
		display: flex;
		flex-direction: row;
		width: 50%;
		border-radius: 0rpx;
		padding-left: 30rpx;
		background: #e64340;
	}

	.weixinmao-foot button {
		background: #07b56d;
		width: 100%;
		color: #fff;
		border-radius: 0rpx;
		font-size: 1rem;
	}

	.ismaster {
		color: red;
		font-weight: bold;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 30rpx;
		align-self: center;
	}

	.selectitem textarea {
		width: 100%;
	}

	.masterbtn {
		margin-top: 100rpx;
		width: 300rpx;
		background: #3274e5;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 5rpx;
		text-align: center;
		font-size: 0.7rem;
	}

	.weixinmao-msg_show {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 2001;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.weixinmao-content_show {
		width: 550rpx;
		height: 600rpx;
		z-index: 4001;
		background: #fff;
		align-self: center;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.weixinmao-content_show .title {
		border-bottom: 1rpx solid #e5e5e5;
		width: 100%;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 0.8rem;
		background: #3274e5;
		color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.weixinmao-content_show .title view:nth-child(1) {
		width: 30%;
	}

	.weixinmao-content_show .title view:nth-child(2) {
		width: 40%;
	}

	.weixinmao-content_show .title view:nth-child(3) {
		width: 30%;
	}

	.weixinmao-content_show .list {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.weixinmao-content_show .list .item {
		width: 100%;
		align-self: center;
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.heaerpic {
		width: 380rpx;
		height: 250rpx;
		align-self: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.heaerpic image {
		width: 160rpx;
		height: 160rpx;
		border: 7rpx solid #fff;
		border-radius: 160rpx;
	}

	.heaerpic view {
		height: 80rpx;
		line-height: 80rpx;
		width: 380rpx;
		text-align: center;
		font-size: 0.8rem;
	}

	.ql-container {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		font-size: 16px;
		line-height: 1.5;
		overflow: auto;
		padding: 10px 10px 20px 10px;
		border: 1px solid #ececec;
	}

	.ql-active {
		color: #22c704;
	}

	.iconfont {
		display: inline-block;
		width: 30px;
		height: 30px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		padding: 0 10px;
		height: 50px;
		width: 100%;
		position: fixed;
		left: 0;
		right: 100%;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ececec;
		border-left: none;
		border-right: none;
	}

	.footer {
		width: 45%;
		color: #fff;
		background-color: #40a724;
		/* margin-right: 10px; */
	}

	.bottom {
		position: fixed;
		bottom: 20px;
		left: 20px;
		right: 20px;

		display: flex;
	}
</style>